<template>
    <div class="about">
      <!-- 查询区----start -->
        <el-form  :inline="true" ref="formSearch" :model="formSearch" class="demo-form-inline" >
            <el-form-item label="公司名称">
                <el-input v-model="formSearch.cname" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="业务类型">
                <el-input v-model="formSearch.type" placeholder="请输入业务类型"></el-input>
            </el-form-item>
            <el-form-item label="租赁时间">
                <el-input v-model="formSearch.leaseTime" placeholder="请输入租赁时间"></el-input>
            </el-form-item>
            <el-form-item label="城市名称">
                <el-input v-model="formSearch.city" placeholder="请输入城市名称"></el-input>
            </el-form-item>
            <el-form-item label="操作" style="margin-left:50px;">
                <el-button type="primary"  icon="el-icon-search" @click="loadData()">查询</el-button>
                <el-button type="warning" icon="el-icon-refresh-right plain" @click="formSearch={}">重置</el-button>
                <el-button type="primary" icon="el-icon-circle-plus"  @click="addbtn()">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询区----end -->
    <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="cname"
            label="公司名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="coontacts"
            label="联系人"
             width="180">
        </el-table-column>
         <el-table-column
            prop="phonenum"
            label="手机号"
             width="180">
        </el-table-column>
        <el-table-column
            prop="fixedNum"
            label="固定电话"
             width="180">
        </el-table-column>
        <el-table-column
            prop="type"
            label="业务类型">
        </el-table-column>
        <el-table-column
            prop="leaseTime"
            label="租赁时间">
        </el-table-column>
        <el-table-column
            prop="city"
            label="城市">
        </el-table-column>
              <el-table-column
            prop="email"
            label="邮箱">
        </el-table-column>
     <el-table-column label="操作" width="250px" fixed="right">
      <template slot-scope="scope">
          <el-button
          size="mini"
          type="success"
          @click="handleEdit(scope.row)">编辑</el-button> 
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,3,5,10,100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
     <!--添加弹出框-->
            <el-dialog :title="title" :visible.sync="addFormVisible" >
                <el-form :model="form"  :rules="rules" :inline="true" ref="form" label-width="200px">
                    <el-form-item label="公司名称" >
                        <el-input v-model="form.cname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" >
                        <el-input v-model="form.coontacts" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="手机号" prop="phonenum"  :rules="rules.phonenum" >
                        <el-input v-model="form.phonenum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话" prop="fixedNum">
                        <el-input v-model="form.fixedNum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="业务类型" >
                        <el-input v-model="form.type" autocomplete="off"></el-input>
                    </el-form-item>
                       <el-form-item label="租赁时间" >
                        <el-input v-model="form.leaseTime" autocomplete="off"></el-input>
                    </el-form-item>
                       <el-form-item label="城市" >
                        <el-input v-model="form.city" autocomplete="off"></el-input>
                    </el-form-item>
                       <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add('form')">确 定</el-button>
                </div>
              </el-dialog>
    </div>
</template>
 <script>
    export default {
      data() {
        var checkPhone = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('手机号不能为空'));
            } else {
              const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
              console.log(reg.test(value));
              if (reg.test(value)) {
                callback();
              } else {
                return callback(new Error('请输入正确的手机号'));
                }
              }
        };
        var checkfixedNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('电话号不能为空'));
        } else {
          const reg = /\d{3}-\d{8}|\d{4}-\d{7}/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的电话号'));
            }
          }
        };
        return {
            rules: {
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
           phonenum: [
              {required: true,validator: checkPhone, trigger: 'blur'}
          ],
          fixedNum: [
              {required: true,validator: checkfixedNum, trigger: 'blur'}
          ]
        },
        
          tableData: [],
          currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                name:'',//查询功能
                addFormVisible:false,
                title:'',
                form:{},
                seen:false,
                formSearch: {},
        }
      }, 
      created:function(){
        this.loadData();
            },
    methods: {
        loadData(){
            let _this=this;
          this.$http.post("/api/mks/company/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,
          { cname:this.formSearch.cname,type:this.formSearch.type,leaseTime:this.formSearch.leaseTime,city:this.formSearch.city}).then((response) => {
              if(response.data.code==2000){
                
                this.tableData = response.data.data.list;
                console.log(JSON.stringify(response.data.data))
                this.total = response.data.data.total;
               } 
        })        
    },
     handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
       },
     handleCurrentChange(val) {
              // console.log(`当前页: ${val}`);
              this.currentPage=val;
              this.loadData();
      },search(){
        this.loadData();
      },addbtn(){
        this.form={};
        this.seen=true;
         this.title="添加";
        this.addFormVisible=true;
      },handleEdit(row){
        var _row=row
        this.form =  JSON.parse(JSON.stringify(_row))
        console.log(this.form)
        this.seen=false;
        this.title="修改";
        this.addFormVisible=true;
      },add:function(form){
          this.$refs[form].validate((valid) => {
              if (valid) {
          
                   var _this =this;
                   if(this.seen){
                      this.$http.post("/api/mks/company/insert",this.form).then((response) => {
                          // console.log(response);
                      if(response.data.code==2000){
                          //提示成功
                          _this.$message({
                              type: 'success',
                              message: '添加成功!'
                          });
                          //关闭弹框
                          _this.addFormVisible=false;
                          //重新加载数据
                          _this.loadData();
                      }
                    }).catch(function (error) {
                              console.log(error);
                              this.$message.error("你错了。。。") 
                    })
                  }else{
                    // this.form.status='';
                    console.log(this.form)
                     this.$http.put('/api/mks/company/update',this.form).then(function (response) {
                            console.log(response);
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message:'修改成功!'
                                    });
                                    _this.loadData();
                                    }}
                        ).catch(function (error) {
                             console.log(error);
                            _this.$message.error("你错了。。。") 
                     })
                     this.addFormVisible=false;
                   } 
                   } else {
                            console.log('error submit!!');
                            return false;
                    }
                    });
                 },
                 //删除
                 handleDelete(row){
                    var _this=this;
                   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                         }).then(() => {
                              //console.log(row.id)
                            
                          this.$http.delete('/api/mks/company/deleteById?id='+row.id).then(function (response) {
                            console.log(response);
    
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    _this.currentPage=1;
                                    _this.loadData();
                                    }}
                        ).catch(function (error) {
                            console.log(error);
                            _this.$message.error("你错了。。。") 
          })   
                        }).catch(() => {
                            _this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });          
                     });
                 }
        }
}
  </script>
  <style >
  .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
  </style>